<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

   <ui:composition> 

	<div id="#{idTabs}" class="#{tabsClass}">
		
		<ul id="lista" class="#{headerClass}">
		
			<ui:insert></ui:insert>
			
		</ul>
		
	</div>
	
	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/tabs/js/Tabs.js"></script>
	<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/componentes/tabs/css/tab.css" />

	<script type="text/javascript">

		var json="";

		var idTabs = "#{idTabs}";

		<c:if test = "#{not empty active}">

			json = $.extend(json,{"active": #{active}});

		</c:if>

		<c:if test = "#{not empty collapsible}">

			json = $.extend(json,{"collapsible": "#{collapsible}"});

		</c:if>

		<c:if test = "#{not empty disabled}">

			json = $.extend(json,{"disabled": #{disabled}});

		</c:if>

		<c:if test = "#{not empty event}">

			json = $.extend(json,{"event": "#{event}"});

		</c:if>

		<c:if test = "#{not empty heightStyle}">

			json = $.extend(json,{"heightStyle": "#{heightStyle}"});

		</c:if>

		<c:if test = "#{not empty hideEffect and not empty hideDuration}">
	
			json = $.extend(json, {hide: {"effect": "#{hideEffect}", "duration": #{hideDuration}}});

		</c:if>

		<c:if test = "#{not empty showEffect and not empty showDuration}">
	
			json = $.extend(json, {show: {"effect": "#{showEffect}", "duration": #{showDuration}}});

		</c:if>

		<c:if test = "#{not empty create}">

			json = $.extend(json,{"create": "#{create}"});

		</c:if>

		<c:if test = "#{not empty activate}">

			json = $.extend(json,{"activate": "#{activate}"});

		</c:if>

		<c:if test = "#{not empty beforeActivate}">

			json = $.extend(json,{"beforeActivate": "#{beforeActivate}"});

		</c:if>

		<c:if test = "#{not empty beforeLoad}">

			json = $.extend(json,{"beforeLoad": "#{beforeLoad}"});

		</c:if>

		<c:if test = "#{not empty load}">

			json = $.extend(json,{"load": "#{load}"});

		</c:if>

		var tabs = new Tabs();
		
		tabs.gerarTabs("#"+idTabs, json);	
		
		<c:set var="tabsClass" value="" />
		<c:set var="headerClass" value="" />
		<c:set var="subTabClass" value="" />
		<c:set var="bodyClass" value="" />
		<c:set var="active" value="" />
		<c:set var="collapsible" value="" />
		<c:set var="disabled" value="" />
		<c:set var="event" value="" />
		<c:set var="heightStyle" value="" />
		<c:set var="hideEffect" value="" />
		<c:set var="hideDuration" value="" />
		<c:set var="showEffect" value="" />
		<c:set var="showDuration" value="" />
		<c:set var="create" value="" />
		<c:set var="activate" value="" />
		<c:set var="beforeActivate" value="" />
		<c:set var="beforeLoad" value="" />
		<c:set var="load" value="" />
		
	</script>


</ui:composition>
   
</html>